<template>
    <div class="change-password wrap" @keyup.enter="submitForm">
        <el-form :model="form" :rules="rules" ref="form" label-width="290px">
            <el-form-item label="Please enter the old password" prop="oldpassword">
                <el-input type="password" v-model="form.oldpassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Please enter the new password" prop="password">
                <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="Please enter the new password again" prop="confirmpassword">
                <el-input type="password" v-model="form.confirmpassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="btn">
                <el-button type="primary" :loading="btnLoading" @click="submitForm('ruleForm')">Save</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'ChangePassword',
        data() {
            // 旧密码验证
            const checkOldPass = (rule, value, callback) => {
                const reg = /^\w{6,18}$/

                if (value === '') {
                    callback(new Error('Password cannot be empty!'))
                } else if (!reg.test(value)) {
                    callback('The password is a combination of 6-18 bits of letters, numbers and underscores. The letters are case-sensitive.')
                } else {
                    callback()
                }
            }
            // 密码验证
            const checkPass = (rule, value, callback) => {
                const reg = /^\w{6,18}$/

                if (value === '') {
                    callback(new Error('Password cannot be empty!'))
                } else if (!reg.test(value)) {
                    callback('The password is a combination of 6-18 bits of letters, numbers and underscores. The letters are case-sensitive.')
                } else {
                    if (this.form.confirmpassword !== '') {
                        this.$refs.form.validateField('confirmpassword')
                    }
                    callback()
                }
            }
            // 确认密码验证
            const confirmCheckPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Password cannot be empty!'))
                } else if (value !== this.form.password) {
                    callback(new Error('Two inconsistent passwords!'))
                } else {
                    callback()
                }
            }

            return {
                btnLoading: false,
                form: {
                    oldpassword: '',
                    password: '',
                    confirmpassword: ''
                },
                rules: {
                    oldpassword: [
                        {required: true, validator: checkOldPass, trigger: 'blur'}
                    ],
                    password: [
                        {required: true, validator: checkPass, trigger: 'blur'}
                    ],
                    confirmpassword: [
                        {required: true, validator: confirmCheckPass, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            linkIndex() {
                this.$router.push('/index')
            },
            submitForm() {
                this.$refs.form.validate(async valid => {
                    if (!valid) return

                    this.btnLoading = true

                    const res = await this.axios.get(`/OnlineTeacher/Personal/SetChangPassword?password=${this.form.oldpassword}&newpassword1=${this.form.password}&newpassword2=${this.form.confirmpassword}`)

                    this.btnLoading = false

                    if (res.code == 1) {
                        localStorage.clear()

                        this.$message({
                            message: 'Modification successful! Jump to login page after 3s',
                            type: 'success',
                            showClose: true,
                            onClose: () => this.$router.push('/login')
                        })
                    } else if (res.code == 0) {
                        this.$message.error('Modification failed!')
                    } else if (res.code == 2) {
                        this.$message.error('The old password is incorrect!')
                    } else if (res.code == 3 || res.code == 4) {
                        this.$message.error('Verification code incorrect!')
                    }
                })
            }
        }
    }
</script>

<style>
    .change-password .el-form-item__error {white-space: nowrap;}
    .change-password .btn .el-form-item__content {margin-left: 0 !important; text-align: center;}
    .change-password .el-form-item__label {font-size: 16px;}
    .change-password .el-form-item {margin-bottom: 30px;}
</style>

<style scoped>
    .wrap {width: 1000px; height: 462px; border-radius: 4px; background: #fff; float: right; padding: 50px 150px 22px 80px;}
    .el-button {background: #4D84FC; box-shadow: 0 0 12px #4D84FC;}
</style>